<template>
	<view>
		
		<view class="login-header">重置密码</view>
		
		<view class="login-wrapper">
			<view class="login-wrapper__item">
				<input class="login-wrapper__item__input" maxlength="16" placeholder-class="placeholder" type="text" v-model="fPassword" :password="isPassWord[0]" placeholder="请输入新密码（至少6位）" />
				<text class="contorl-icon iconfont" :class="isPassWord[0] ? '' : 'active'" @click="toggleType('first')">&#xe62b;</text>
				<text class="contorl-icon iconfont" v-if="fPassword" @click="clearData('first')">&#xe6d0;</text>
			</view>
			<view class="login-wrapper__item">
				<input class="login-wrapper__item__input" maxlength="16" placeholder-class="placeholder" type="text" v-model="sPassword" :password="isPassWord[1]" placeholder="请再次输入密码" />
				<text class="contorl-icon iconfont" :class="isPassWord[1] ? '' : 'active'" @click="toggleType('second')">&#xe62b;</text>
				<text class="contorl-icon iconfont" v-if="sPassword" @click="clearData('second')">&#xe6d0;</text>
			</view>
			<view class="login-wrapper__button" v-if="completeCheck" @click="confirmModify">确认修改</view>
			<view class="login-wrapper__button disabled" v-else>确认修改</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				account: '',
				verify_token: '',
				fPassword: '',
				sPassword: '',
				isPassWord: [true, true]
			}
		},
		computed: {
			// 验证信息完整度
			completeCheck(){
				return this.fPassword && this.sPassword
			}
		},
		onLoad(options) {
			this.verify_token = options.verify_token;
			this.account = options.user
		},
		methods: {
			
			// 密码显示隐藏
			toggleType(item){
				let isPassWord = this.isPassWord;
				if(item === 'first'){
					isPassWord[0] = this.$set(isPassWord, "0", !isPassWord[0])
				}else if(item === 'second'){
					isPassWord[1] = this.$set(isPassWord, "1", !isPassWord[1])
				}
			},
			
			// 清除密码
			clearData(item){
				if(item === 'first'){
					this.fPassword = ''
				}else if(item === 'second'){
					this.sPassword = ''
				}
			},
			
			// 提交修改
			confirmModify(){
				let fPassword = this.fPassword;
				let sPassword = this.sPassword;
				
				if(fPassword.length < 6 || sPassword.length < 6){
					uni.showToast({
						title: '密码不少于6位数！',
						icon: 'none'
					})
					return;
				}
				
				if(fPassword !== sPassword){
					uni.showToast({
						title: '前后两次密码不一致！',
						icon: 'none'
					})
					return;
				}
				
				this.modifyRequest()
				
			},
			
			// 提交请求
			async modifyRequest(){
				let modifyRes,
					params = {
						method: "api/v2/member/find/reset_password",
						user: this.account,
						pwd: this.fPassword,
						verify_token: this.verify_token
					}
				modifyRes = await this.$http(params);
				if(modifyRes.status){
					uni.showToast({
						title: "密码重置成功",
						icon: "none"
					})
					setTimeout(() => {
						uni.switchTab({
							url: '../../../pages/ucenter/index',
						})
					}, 1500)
				}else{
					uni.showToast({
						title: modifyRes.msg,
						icon: "none"
					})
				}
			}
			
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #fff;
	}
	.login-header{
		padding: 60rpx;
		font-size: 40rpx;
		font-weight: bold;
	}
	.login-wrapper{
		padding: 0 60rpx;
		&__item{
			display: flex;
			align-items: center;
			margin-top: 20rpx;
			position: relative;
			&:after{
				content: "";
				display: block;
				width: 100%;
				height: 2rpx;
				position: absolute;
				bottom: 0;
				transform: scaleY(.5);
				background-color: $uni-border-color;
			}
			&__input{
				flex: 1 1 auto;
				padding: 30rpx 0 20rpx;
				font-size: $uni-font-size-base;
			}
			&__send{
				flex: 0 0 auto;
				color: $uni-color-primary;
				margin-left: 40rpx;
				font-size: $uni-font-size-sm;
			}
		}
		&__button{
			color: $uni-text-color-inverse;
			margin-top: 56rpx;
			padding: 20rpx 0;
			text-align: center;
			border-radius: $uni-border-radius-lg;
			font-size: $uni-font-size-lg;
			background-color: $uni-bg-color-primary;
			&.disabled{
				background-color: #bdefd6;
			}
		}
	}
	.contorl-icon{
		color: #c2c6cf;
		display: inline-block;
		margin-left: 20rpx;
		font-size: 38rpx;
		&.active{
			color: #ff6700;
		}
	}
	.placeholder{
		color: $uni-text-color-placeholder;
	}
</style>
